{{define "theme-daynight/home"}}
<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{{.Title}}</title>
    <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />

    <link rel="stylesheet" href="/static/theme-daynight/css/main.css?v202108042286">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    {{if ts .CustomCode}}
    {{.CustomCode|safe}}
    {{end}}
</head>

<body data-theme="light" data-gridlist="grid">
    <header>
        <section class="nav-bar clearfix">
          <figure class="logo">
            <a href="/">
              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 88 88">
                <g>
                  <path fill="#1d71b8" d="M81.46,20.89l-.26.26-9.71,9.71h0l-9.41,9.4-9.56,9.56,0,0L43,59.36l0,0,0,0-9.58-9.58-9.46-9.47-9.77,9.77L3.36,61A43.92,43.92,0,0,1,0,45.2v0L14.35,30.81l6-6,3.52-3.52,9.57,9.58L43,40.29l0,0,9.55-9.55L63,20.22a30.47,30.47,0,0,0-26.69-5.69L25.75,4A44,44,0,0,1,72.64,10.6,44.36,44.36,0,0,1,81.46,20.89Z" />
                  <path fill="#36a9e1" d="M88,44A44,44,0,0,1,10.58,72.66L20.21,63a30.45,30.45,0,0,0,54.06-15.6L87,34.68A44.15,44.15,0,0,1,88,44Z" />
                </g>
              </svg>
            </a>
            <a href="/">{{.Conf.Site.Brand}}</a>
          </figure>
            <div class="icon-container">
                <div class="row cf">
                    <div class="three col">
                        <div class="hamburger" id="hamburger-icon"><span class="line"></span><span class="line"></span><span
                                class="line"></span></div>
                    </div>
                </div>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/service">服务状态</a></li>
                    {{if .Admin}}
                    <li><a href="/server">管理后台</a></li>
                    {{else}}
                    <li><a href="/login">登录</a></li>
                    {{end}}
                </ul>
            </nav>
            </section>
    </header>
 
<main>
    <div id="app">
        <div class="server-info-container" v-for='server in servers' :id="server.ID">
            <div class="info-body">
                <ul class="server-info-body-container">
                    <li>
                        <div :class="'state-'+ (server.live?'online':'offline')">
                            <p>@#server.live?'Running':'Down'#@</p>
                        </div>
                    </li>
                    <li>
                        <h3>@#server.Name#@</h3>
                    </li>
                    <li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
                            :title="server.Host.CountryCode.toUpperCase()" /></li>
                    <li>@#server.Host.Platform#@</li>
                    <li>@#server.Host.CountryCode.toUpperCase()#@</li>
                    <li>@#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@</li>
                    <li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li>
                    <li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li>
                    <li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li>
                    <li>@#formatByteSize(server.State.NetInTransfer)#@ (@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
                    <li>@#formatByteSize(server.State.NetOutTransfer)#@ (@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
                    <li>
                        <div class="cpu-bar">
                            <div>
                                <h4>CPU</h4>
                            </div>
                            <div v-if="server.State" :class="formatPercent(server.live,server.State.CPU, 100).class"
                                :title="formatPercent(server.live,server.State.CPU,100).percent+'%'">
                                <div class="progress-bar" role="progressbar" :aria-valuenow="formatPercent(server.live,server.State.CPU,100).percent" aria-valuemin="0" aria-valuemax="100" 
                                    :style="formatPercent(server.live,server.State.CPU, 100).style">
                                    <p>@#formatPercent(server.live,server.State.CPU,100).percent#@%</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="ram-bar">
                            <div>
                                <h4>RAM</h4>
                            </div>
                            <div v-if="server.State"
                                :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"
                                :title="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%'">
                                <div class="progress-bar" role="progressbar" :aria-valuenow="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)" aria-valuemin="0" aria-valuemax="100"
                                    :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
                                    <p>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="disk-bar">
                            <div>
                                <h4>硬盘</h4>
                            </div>
                            <div v-if="server.State"
                                :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"
                                :title="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%'">
                                <div class="progress-bar" role="progressbar" :aria-valuenow="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)" aria-valuemin="0" aria-valuemax="100"
                                    :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
                                    <p>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
       <div class="sidebar-container">
        <ul>
          <li><i class="fas fa-sun" title="白昼模式"></i><span>白昼模式</span></li>
          <li><i class="fas fa-moon" title="暗黑模式"></i><span>暗黑模式</span></li>
          <li><i class="fas fa-th" title="网格视图"></i><span>网格视图</span></li>
          <li><i class="fas fa-list-ul" title="列表视图"></i><span>列表视图</span></li>
        </ul>
      </div>
</main>

    <section class="dark-light-toggle">
      <label class="switcher">
        <input type="checkbox" name="theme" id="dark-light" />
        <div>
          <i class="fas fa-adjust"></i>
        </div>
      </label>
    </section>
    
    <!-- Back to top button -->
    <a id="back-to-top"></a>

    <footer>
        <div class="footer-container">
            <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒监控 · {{.Version}}</a>
                <p>&copy; <span id="copyright-date">
                        <script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script>
                    </span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
                </p>
            </div>
        </div>
    </footer>

    <script src="/static/theme-daynight/js/main.js?v202102012266" ></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

    <script>
        const initData = {{.Servers }};
        var statusCards = new Vue({
            el: '#app',
            delimiters: ['@#', '#@'],
            data: {
                servers: initData,
                cache: [],
            },
            mounted() {
                this.DarkMode();
            },
            methods: {
                mergeUsage(state, host) {
                    if (!state) {
                        return 0
                    }
                    if (!host) {
                        return state.CPU
                    }
                    return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
                },
                formatPercent(live, used, total) {
                    const percent = live ? (parseInt(used / total * 100) || 0) : -1
                    if (!this.cache[percent]) {
                        this.cache[percent] = {
                            class: {
                                ui: true,
                                progress: true,
                            },
                            style: {
                                'transition-duration': '300ms',
                                'min-width': 'unset',
                                width: percent + '% !important',
                            },
                            percent,
                        }
                        if (percent < 0) {
                            this.cache[percent].style['background-color'] = 'slategray'
                            this.cache[percent].class.offline = true
                        } else if (percent < 51) {
                            this.cache[percent].style['background-color'] = '#53B449'
                            this.cache[percent].class.fine = true
                        } else if (percent < 81) {
                            this.cache[percent].style['background-color'] = '#FBB142'
                            this.cache[percent].class.warning = true
                        } else {
                            this.cache[percent].style['background-color'] = '#F23D34'
                            this.cache[percent].class.error = true
                        }
                    }
                    return this.cache[percent]
                },
                readableBytes(bytes) {
                    if (!bytes) {
                        return '0B'
                    }
                    var i = Math.floor(Math.log(bytes) / Math.log(1024)),
                        sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
                    return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
                },
                DarkMode() {
                    const hour = new Date(Date.now()).getHours()
                    if (hour > 17 || hour < 4) {
                        document.querySelector("input[name=theme]").checked = true;
                        document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
                    }
                },
                secondToDate(s) {
                    var d = Math.floor(s / 3600 / 24);
                    if (d > 0) {
                        return d + "天"
                    }
                    var h = Math.floor(s / 3600 % 24);
                    var m = Math.floor(s / 60 % 60);
                    var s = Math.floor(s % 60);
                    return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
                },
                formatTimestamp(t) {
                    return new Date(t * 1000).toLocaleString()
                },
                formatByteSize(bs) {
                    const x = this.readableBytes(bs)
                    return x != "NaN undefined" ? x : '0B'
                }
            }
        })
        const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
        const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
        ws.onopen = function (evt) {
            Swal.fire({
                position: 'top',
                icon: 'success',
                title: '实时通道建立',
                text: '可以实时获取最新监控数据啦',
                showConfirmButton: false,
                timer: 2000
            });
        }
        ws.onmessage = function (evt) {
            const data = JSON.parse(evt.data)
            statusCards.servers = data.servers
            const keys = Object.keys(statusCards.servers)
            for (let i = 0; i < keys.length; i++) {
                const ns = statusCards.servers[keys[i]];
                if (!ns.Host) ns.live = false
                else {
                    const lastActive = new Date(ns.LastActive).getTime()
                    if (data.now - lastActive > 10 * 1000) {
                        ns.live = false
                    } else {
                        ns.live = true
                    }
                }
            }
        }
        ws.onclose = function () {
            Swal.fire({
                position: 'top',
                icon: 'error',
                title: '实时通道断开',
                text: '无法实时获取最新监控数据咯',
                showConfirmButton: false,
                timer: 2000
            });

        }
    </script>
</body>

</html>
{{end}}
